<template>
  <a-card :bordered="false" class="TestDesign_box">
    <div class="table-page-search-wrapper" v-if="createFormBox">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="4" :sm="24" style="min-width: 230px;">
            <a-form-item>
              <a-input v-model="queryParam.experimentNum" placeholder="请输入试验编号" />
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="24" style="min-width: 230px;">
            <a-form-item>
              <a-select v-model="queryParam.experimentType" placeholder="请选择试验类型" default-value="0">
                <a-select-option value="">全部</a-select-option>
                <a-select-option value="1">临床试验</a-select-option>
                <a-select-option value="2">生物制剂安全</a-select-option>
                <a-select-option value="3">化妆品安全</a-select-option>
                <a-select-option value="4">药品安全</a-select-option>
                <a-select-option value="5">食品安全</a-select-option>
                <a-select-option value="6">医疗器械安全</a-select-option>
                <a-select-option value="7">观察研究</a-select-option>
                <a-select-option value="8">公共卫生</a-select-option>
                <a-select-option value="9">辐射产品</a-select-option>
                <a-select-option value="10">烟草使用</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <div style="float: right;margin-right:24px;">
            <a-button type="primary" icon="plus" @click="createFormBox=false" v-if="operationPermission['add']">创建试验</a-button>
          </div>
        </a-row>
      </a-form>

      <s-table
        class="table_style"
        ref="table"
        size="default"
        rowKey="key"
        :columns="columns"
        :data="loadData"
        :alert="options.alert"
        :rowSelection="options.rowSelection"
        showPagination="auto">
        <span slot="serial" slot-scope="text,record,index">{{ index + 1 }}</span>
        <template slot="status" slot-scope="text,record,index" class="table_status_box_test">
          <a-popover title="可切换账户状态" trigger="hover" class="table_status_title" v-if="operationPermission['updateStatus']">
            <div slot="content">
              <!--              <a-button class="table_status table_status2" @click="tableStatusEvent(record,2)">预发布</a-button>-->
              <a-button class="table_status table_status3" @click="tableStatusEvent(record,3)">进行中</a-button>
              <a-button class="table_status table_status4" style="margin:0 5px" @click="tableStatusEvent(record,4)">暂停中</a-button>
              <a-button class="table_status table_status5" @click="tableStatusEvent(record,5)">已结束</a-button>
            </div>

            <a-button :class="'table_status' +' '+'table_status'+text" @click="aaa" ref="tableStatusEvent">{{ designArray[text] }}</a-button>
          </a-popover>
          <div v-else>
            <a-button :class="'table_status' +' '+'table_status'+text" @click="aaa" ref="tableStatusEvent">{{ designArray[text] }}</a-button>
          </div>
        </template>
        <!--        <span slot="customTitle" slot-scope="text,record,index">发布时间-->
        <!--          <a-tooltip placement="top">-->
        <!--            <template>-->
        <!--              <span>最新版本发布时间</span>-->
        <!--            </template>-->
        <!--            <a-icon-->
        <!--              type="exclamation"-->
        <!--              :style="{ fontSize: '16px',-->
        <!--                        color: '#fff',-->
        <!--                        fontWeight: '700',-->
        <!--                        borderRadius: '50%',-->
        <!--                        marginLeft: '5px',-->
        <!--                        background: 'rgba(191,191,191,1)'}" />-->
        <!--          </a-tooltip>-->
        <!--          <span v-if="record.publishTime===null"> &#45;&#45;</span>-->
        <!--          <span v-else> {{ record.publishTime }}</span>-->
        <!--        </span>-->

        <!--        <span slot="customTitle"><a-icon type="smile-o" /> 发布时间</span>-->
        <span slot="customTitle">
          发布时间
          <a-tooltip placement="top">
            <template slot="title">
              <span>最新版本发布时间</span>
            </template>
            <a-icon
              type="exclamation"
              :style="{ fontSize: '16px',
                        color: '#fff',
                        fontWeight: '700',
                        borderRadius: '50%',
                        marginLeft: '5px',
                        background: 'rgba(191,191,191,1)'}" />
          </a-tooltip>
        </span>

        <span slot="action" slot-scope="text,record,index" class="operation_button_box">
          <template>
            <button class="button_pct operation_button_details" v-if="operationPermission['detail']" @click="handleDetail(record)">详情</button>
            <button v-if="operationPermission['update'] && record.status===2" class="button_pct operation_button_release" @click="handleEdit(record)" ghost>编辑</button>
            <button v-if="operationPermission['update'] && record.status!=2" class="button_pct operation_button_edit" type="danger" @click="handleEdit(record)">发布新版</button>
          </template>
        </span>
      </s-table>
    </div>
    <create-form v-else @ok="handleOk" @Cancel="CreateFormHandleCancel" ref="modal" />
    <test-design v-if="testDetail" @ok="handleOk" ref="modal1"></test-design>
    <step-by-step-modal ref="modal" @ok="handleOk" />
  </a-card>
</template>

<script>
import moment from 'moment'
import { STable, Ellipsis } from '@/components'
import TestDesign from './modules/TestDesign'
import CreateForm from './modules/CreateForm'
import { getTestList, getTestUpdateStatus, postTestPublish } from '@/api/experiment'

export default {
  name: 'TableList',
  components: {
    STable,
    Ellipsis,
    CreateForm,
    TestDesign
  },
  data () {
    return {
      operationPermission:{},
      createFormBox: true,
      testDetail: false,
      // testDetailData: '',
      mdl: {},
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      // 表头
      visible: false,
      designArray: {
        '2': '预发布',
        '3': '进行中',
        '4': '暂停中',
        '5': '已结束'
      },
      columns: [
        {
          title: '序号',
          scopedSlots: { customRender: 'serial' },
          align: 'center'
        },
        {
          title: '试验编号',
          dataIndex: 'experimentNum',
          align: 'center'
        },
        {
          title: '试验名称',
          dataIndex: 'experimentName',
          align: 'center'
        },
        {
          title: '试验类型',
          dataIndex: 'experimentTypeName',
          needTotal: true,
          // customRender: (text) => text + ' 次',
          align: 'center'
        },
        {
          title: '申办方',
          dataIndex: 'bidName',
          align: 'center'
        },
        {
          title: '数据合作方',
          dataIndex: 'dataPartnerName',
          align: 'center'
        },
        {
          title: '试验状态',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' },
          align: 'center'
        },
        {
          // title: '试验时间',
          // dataIndex: 'updatedAt',
          // align:'center'
          // dataIndex: 'name',
          // key: 'name',
          // slots: { title: 'customTitle' },
          // scopedSlots: { customRender: 'name' },

          dataIndex: 'publishTime',
          // key: 'publishTime',
          slots: { title: 'customTitle' },
          // scopedSlots: { customRender: 'publishTime' },
          align: 'center'//,
          // background: 'transparent',
          // sorter: (a, b) => moment(a.publishTime).isBefore(b.publishTime),
          // sortOrder: 'ascend',
          // defaultSortOrder: 'ascend',
          // defaultSortOrder: false,
          // sortDirections: ['descend', 'ascend']
          // sortDirections: ['ascend']
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '200px',
          scopedSlots: { customRender: 'action' },
          align: 'center'
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return getTestList(Object.assign(parameter, this.queryParam))
          .then(res => {
            res.data.data = res.data.list
            return res.data
            // return res.result
          })
      },
      selectedRowKeys: [],
      selectedRows: [],

      // custom table alert & rowSelection
      options: {
        alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
        rowSelection: {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange
        }
      },
      optionAlertShow: true
    }
  },
  filters: {
    statusFilter (type) {
      return statusMap[type].text
    },
    statusTypeFilter (type) {
      return statusMap[type].status
    }
  },
  created () {
    this.tableOption()
  },
  methods: {
    CreateFormHandleCancel () {
      this.createFormBox = true
    },
    tableOption () {
      if (!this.optionAlertShow) {
        this.options = {
          alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
          rowSelection: {
            selectedRowKeys: this.selectedRowKeys,
            onChange: this.onSelectChange,
            getCheckboxProps: record => ({
              props: {
                disabled: record.no === 'No 2', // Column configuration not to be checked
                name: record.no
              }
            })
          }
        }
        this.optionAlertShow = true
      } else {
        this.options = {
          alert: false,
          rowSelection: null
        }
        this.optionAlertShow = false
      }
    },
    handleEdit (record) {
      this.createFormBox = false
      // this.testDetailData = record
      setTimeout(() => {
        this.$refs.modal.edit(record)
      }, 500)
    },
    handleDetail (record) {
      this.testDetail = true
      // this.testDetailData = record
      setTimeout(() => {
        this.$refs.modal1.edit(record)
      }, 500)
    },
    handleSub (record) {
      // postTestPublish
      postTestPublish({ 'experimentId': record.id, 'status': '3' }).then(res => {
        if (res.code === 200) {
          this.$message.success(res.message)
          this.$refs.table.refresh(true)
        }
      })
      // if (record.status !== 0) {
      //   this.$message.info(`${record.no} 订阅成功`)
      // } else {
      //   this.$message.error(`${record.no} 订阅失败，规则已关闭`)
      // }
    },
    handleOk () {
      this.$refs.table.refresh()
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    resetSearchForm () {
      this.queryParam = {
        date: moment(new Date())
      }
    },
    tableStatusEvent (v, type) {
      getTestUpdateStatus({ 'experimentId': v.id, 'status': type }).then(res => {
        if (res.code === 200) {
          this.$message.success(res.message)
          this.$refs.table.refresh(true)
        }
      })
    },
    aaa () {

    },
    onChange (pagination, filters, sorter) {
      console.log('params', pagination, filters, sorter)
    }
  },
  watch: {
    queryParam: {
      handler (newValue, oldValue) {
        this.$refs.table.refresh(true)
      },
      deep: true
    }
  },
  created () {    
    let list = JSON.parse(localStorage.getItem("operationPermission"))
    list.forEach(element => {
      if (element.permissionId == 'experimentList') { 
        element.actionVOS.forEach(i => {
          this.operationPermission[i.action] = i.defaultCheck
        });
      }      
    });
  },

  // components: {
  //   baseBill
  // },
  // props: {},
  // watch: {},
  // methods: {},
  // filters: {},
  // computed: {},
  // mounted () { },
  // destroyed () { }
}
</script>

<style lang="less" scoped>
.TestDesign_box {
  .table_status {
    overflow: hidden;
    margin: 5px;
    transition: all 0.5s;
    span {
      position: initial !important;
      &:after {
        content: '';
        z-index: 1;
        border-top: solid 3px transparent;
        border-left: solid 3px black;
        border-bottom: solid 3px transparent;
        -webkit-transform: rotate(-316deg);
        transform: rotate(-316deg);
        position: absolute;
        bottom: 0px;
        right: 1px;
        border-left-color: #fff;
      }
    }
  }
  .ant-popover-title {
    width: 98px;
    height: 22px;
    font-size: 14px;
    font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
    line-height: 22px;
  }
  .table_status2 {
    border: 1px #999999 solid;
    transition: all 0.5s;
    span {
      color: #999999;
    }
    &:after {
      content: '';
      border-top: solid 10px transparent;
      border-left: solid 10px black; /* 黑色大三角形 */
      border-bottom: solid 10px transparent;
      transform: rotate(-316deg);
      position: absolute;
      bottom: -7px;
      right: -2px;
      border-left-color: #999999;
    }
    &:hover {
      transition: all 0.5s;
      border: 1px #999999 solid !important;
      background: #999999;
      span {
        color: #000;
      }
    }
  }

  .table_status3 {
    transition: all 0.5s;
    border: 1px #56ced1 solid;
    color: #56ced1;
    &:after {
      content: '';
      border-top: solid 10px transparent;
      border-left: solid 10px black; /* 黑色大三角形 */
      border-bottom: solid 10px transparent;
      transform: rotate(-316deg);
      position: absolute;
      bottom: -7px;
      right: -2px;
      border-left-color: #56ced1;
    }
    &:hover {
      transition: all 0.5s;
      border: 1px #56ced1 solid !important;
      background: #56ced1;
      color: #fff;
    }
  }
  .table_status4 {
    transition: all 0.5s;
    border: 1px #c42525 solid;
    color: #c42525;
    &:after {
      content: '';
      border-top: solid 10px transparent;
      border-left: solid 10px black; /* 黑色大三角形 */
      border-bottom: solid 10px transparent;
      transform: rotate(-316deg);
      position: absolute;
      bottom: -7px;
      right: -2px;
      border-left-color: #c42525;
    }
    &:hover {
      transition: all 0.5s;
      border: 1px #c42525 solid !important;
      background: #c42525;
      color: #fff;
    }
  }

  .table_status5 {
    transition: all 0.5s;
    border: 1px #eea91c solid;
    color: #eea91c;
    &:after {
      content: '';
      border-top: solid 10px transparent;
      border-left: solid 10px black; /* 黑色大三角形 */
      border-bottom: solid 10px transparent;
      transform: rotate(-316deg);
      position: absolute;
      bottom: -7px;
      right: -2px;
      border-left-color: #eea91c;
    }
    &:hover {
      transition: all 0.5s;
      border: 1px #eea91c solid !important;
      background: #eea91c;
      color: #fff;
    }
  }

  .ant-popover-inner-content {
    padding: 5px 10px;
  }
  .table_status_box_test:hover {
    background: red;
  }
  .popover_hint {
    background: red;
  }
  .operation_button_box {
    padding: 0px;
  }
  .operation_button_details {
    background: rgba(86, 206, 209, 1);
    box-shadow: 0px 2px 4px 0px rgba(107, 203, 206, 0.68);
  }

  .operation_button_release {
    background: rgba(238, 114, 114, 1);
    box-shadow: 0px 2px 4px 0px rgba(255, 215, 215, 1);
  }
  .operation_button_edit {
    background: rgba(248, 147, 31, 1);
    box-shadow: 0px 2px 4px 0px rgba(245, 215, 180, 1);
  }
}
.ant-popover-inner {
  .table_status2 {
    border: 1px #999999 solid;
    transition: all 0.5s;
    color: #999999;
    &:after {
      content: '';
      border-top: solid 10px transparent;
      border-left: solid 10px black; /* 黑色大三角形 */
      border-bottom: solid 10px transparent;
      transform: rotate(-316deg);
      position: absolute;
      bottom: -7px;
      right: -2px;
      border-left-color: #999999;
    }
    &:hover {
      transition: all 0.5s;
      border: 1px #999999 solid !important;
      background: #999999;
      color: #fff;
    }
  }
  .table_status3 {
    transition: all 0.5s;
    border: 1px #56ced1 solid;
    color: #56ced1;
    &:after {
      content: '';
      border-top: solid 10px transparent;
      border-left: solid 10px black; /* 黑色大三角形 */
      border-bottom: solid 10px transparent;
      transform: rotate(-316deg);
      position: absolute;
      bottom: -7px;
      right: -2px;
      border-left-color: #56ced1;
    }
    &:hover {
      transition: all 0.5s;
      border: 1px #56ced1 solid !important;
      background: #56ced1;
      color: #fff;
    }
  }
  .table_status4 {
    transition: all 0.5s;
    border: 1px #c42525 solid;
    color: #c42525;
    &:after {
      content: '';
      border-top: solid 10px transparent;
      border-left: solid 10px black; /* 黑色大三角形 */
      border-bottom: solid 10px transparent;
      transform: rotate(-316deg);
      position: absolute;
      bottom: -7px;
      right: -2px;
      border-left-color: #c42525;
    }
    &:hover {
      transition: all 0.5s;
      border: 1px #c42525 solid !important;
      background: #c42525;
      color: #fff;
    }
  }
  .table_status5 {
    transition: all 0.5s;
    border: 1px #eea91c solid;
    color: #eea91c;
    &:after {
      content: '';
      border-top: solid 10px transparent;
      border-left: solid 10px black; /* 黑色大三角形 */
      border-bottom: solid 10px transparent;
      transform: rotate(-316deg);
      position: absolute;
      bottom: -7px;
      right: -2px;
      border-left-color: #eea91c;
    }
    &:hover {
      transition: all 0.5s;
      border: 1px #eea91c solid !important;
      background: #eea91c;
      color: #fff;
    }
  }
}
</style>
